Panels and controls topic

The glass a screen is made of. Each wears the theme's finish unless it names its own, and picks a label colour that reads over it.

Widget What it is
GlassBar A capsule for a title, a search field or a row of actions.
GlassButton A tappable capsule that brightens while held.
GlassCard A panel for grouped content.
GlassSwitch, GlassSlider Controls whose knob turns into a clear drop while held.
GlassSegmentedControl The selection lifts into a drop that slides between segments.
GlassTabBar A tab bar whose selection is a drop that can be dragged between tabs.
GlassButtonGroup One capsule of icon buttons (GlassToolbarItem): one surface however many.
GlassTextField A single line of text in a glass capsule.
GlassScrollEdge iOS's soft edge under a bar, where content scrolls away.
GlassScaffold A whole screen: host, top bar, scroll edge, bottom bar and floating action.

A bar of actions

GlassBar(
  child: Row(
    children: <Widget>[
      const Expanded(child: Text('Inbox')),
      GlassButton(onPressed: compose, child: const Icon(Icons.edit)),
    ],
  ),
)

Inside a bar, plain icons are cheaper than GlassButtons, which are glass on glass; a row of actions is cheapest as a GlassButtonGroup.

Controls

GlassCard(
  child: Column(
    children: <Widget>[
      GlassSwitch(value: on, onChanged: (bool v) => setState(() => on = v)),
      GlassSlider(value: level, onChanged: (double v) => setState(() => level = v)),
    ],
  ),
)

The drop of a switch, a slider, a segmented control and a tab bar moves inside a travel region of its own: dragging it takes no capture.

Classes

GlassBar Panels and controls
A glass bar: the navigation layer, which is where Apple's guidelines put this material.
GlassButton Panels and controls
A glass control: a capsule that takes a tap and brightens while held.
GlassButtonGroup Panels and controls
Adjacent actions in one glass capsule — a circle for one — as iOS 26's toolbar draws them. One surface whatever the count.
GlassCard Panels and controls
A glass card: the same panel as GlassBar with a corner instead of a capsule.
GlassScaffold Panels and controls
A screen: a body that scrolls under a glass topBar, with an optional bottomBar and floatingAction, under a GlassHost.
GlassScrollEdge Panels and controls
The scroll edge effect under a bar, and the bar.
GlassSegmentedControl Panels and controls
A row of mutually exclusive segments; the selected one lifts into a clear glass drop while a finger is on it. See the file comment for what it costs.
GlassSlider Panels and controls
A slider whose knob becomes a clear glass drop while it is held.
GlassSwitch Panels and controls
A switch whose knob becomes a clear glass drop while it is held.
GlassTabBar Panels and controls
A bottom bar of tabs whose selection becomes a glass drop under a finger.
GlassTabItem Panels and controls
One item of a GlassTabBar.
GlassTabItemLook Panels and controls
What a GlassTabBar resolved for one of its items, as it draws it.
GlassTextField Panels and controls
A single line of text in a glass capsule.
GlassToolbarItem Panels and controls
One action of a GlassButtonGroup.
SliderGeometry Panels and controls
Where the slider's fill ends for a value, on a slider width wide.

Constants

kGlassDisabledDarkLabel → const Color Panels and controls
The label of a disabled GlassButton whose enabled label is black, and whose enabled label is white.
kGlassDisabledLightLabel → const Color Panels and controls
The label of a disabled GlassButton whose enabled label is white: tertiaryLabel in dark, (235, 235, 245) at 0.3 (D221).
kGlassDisabledOpacity → const double Panels and controls
How opaque a disabled switch or slider is, drawn as one group.
kGlassDropDuration → const Duration Panels and controls
How long the drop of a GlassSwitch or a GlassSlider takes to lift or settle.
kGlassDropOptics → const GlassOptics Panels and controls
The optics of a held drop, which are not the material's.
kGlassDropScale → const double Panels and controls
How much larger a held drop is than the resting knob, by default.
kGlassFieldHeight → const double Panels and controls
The field's height (spike 33: the standalone search field, 44 pt).
kGlassMinTapTarget → const Size Panels and controls
The smallest a control may be, logical px — Apple's Human Interface Guidelines, 44 x 44 pt.
kGlassScaffoldActionGap → const double Panels and controls
How far the floating action stands from the screen's end edge and from the bottom bar, logical px. Layout taste, as Material's.
kGlassScaffoldBarHeight → const double Panels and controls
GlassScaffold.topBarHeight's default, logical px. Layout taste, not a measurement: Material's toolbar height, which the example's shell uses.
kGlassScaffoldBarMargin → const EdgeInsets Panels and controls
GlassScaffold.barMargin's default: the space around each bar, inside the safe area. Layout taste.
kGlassScrollEdgeDarkTint → const Color Panels and controls
The soft edge's tint at the edge over dark content: black at 0.25, read over content whose mean was a mid grey (spike 31).
kGlassScrollEdgeHardFill → const Color Panels and controls
The hard edge's band: a near-opaque white, 0.90 over both a dark and a light field (spike 31). A dark appearance was not photographed.
kGlassScrollEdgeHardSigma → const double Panels and controls
The hard edge's blur: a bound, not a reading — see the file comment.
kGlassScrollEdgeLightTint → const Color Panels and controls
The soft edge's tint at the edge over light content: white at 0.85 (spike 31).
kGlassScrollEdgeSigma → const double Panels and controls
The soft edge's blur, logical px (spike 31: 1.55–1.67).
kGlassSegmentDropGrow → const Size Panels and controls
How far past the resting capsule the held drop reaches, across and down, logical px (spike 32: 86 x 28 -> 110 x 44).
kGlassSegmentDropWiden → const double Panels and controls
How much of the backdrop past its box the held drop shows (spike 32: a margin of 2.9 pt is the better of two poor fits).
kGlassSegmentTrack → const Color Panels and controls
The track's fill: iOS's tertiarySystemFill, read off the simulator as (116–127) at 0.12 (spike 32).
kGlassSwitchDropWiden → const double Panels and controls
How far past its own box the held switch's drop shows, logical px — the iOS switch's drop minifies what is under it (×0.85 across, ×0.79 down on a 58 × 38 pt drop), which is this one margin rather than one zoom (D218). The slider's drop, read the same way, does not minify, and its default is 0. See GlassOptics.widen.
kGlassSwitchSize → const Size Panels and controls
The iOS 26 switch's track, logical px. Its resting knob is 38 x 24.
kGlassTabDropGrow → const double Panels and controls
How much larger than the resting capsule the held drop is, on every side, logical px (D218).
kGlassTabDropZoom → const double Panels and controls
How much the held drop magnifies the bar under it (D218).
kGlassToolbarHeight → const double Panels and controls
The group's height, and the circle a group of one is (spike 33).
kGlassToolbarItemWidth → const double Panels and controls
Each item's width in a group of more than one: 159 pt for three (spike 33).

Enums

GlassScrollEdgeAppearance Panels and controls
Which way a soft edge tints: toward white over light content, toward black over dark. Apple picks it from the content; see GlassScrollEdge.appearance.
GlassScrollEdgeSide Panels and controls
Which side of the scroll view the effect is on.
GlassScrollEdgeStyle Panels and controls
Apple's two styles of scroll edge effect.

Typedefs

GlassTabItemBuilder = Widget Function(BuildContext context, GlassTabItemLook look) Panels and controls
Builds an item's icon or label from what the bar resolved for it.